<div class="wrapper">
  <div class="bar">
    <mat-form-field class="example-full-width">
      <mat-select
        [(ngModel)]="formData.schedule"
        placeholder="Current Schedule"
      >
        <mat-option *ngFor="let schedule of schedules" [value]="schedule.id"
          >{{ schedule.name }}
          <span style="color: gray">{{ schedule.type }}</span></mat-option
        >
      </mat-select>
    </mat-form-field>
  </div>
  <div class="bar">
    <mat-form-field>
      <mat-select [(ngModel)]="formData.subject" placeholder="subject">
        <mat-option *ngFor="let subject of subjects" [value]="subject">{{
          subject
        }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <input
        matInput
        placeholder="catalog"
        [(ngModel)]="formData.catalog"
        value=""
      />
    </mat-form-field>
    <button
      mat-raised-button
      color="primary"
      (click)="onSearchBySubjectAndCatalog()"
    >
      search
    </button>
  </div>

  <div class="bar">
    <mat-form-field>
      <input
        matInput
        placeholder="ClassName"
        [(ngModel)]="searchData.className"
        value=""
      />
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <input
        matInput
        placeholder="catalog"
        [(ngModel)]="searchData.catalog"
        value=""
      />
    </mat-form-field>
    <button
      mat-raised-button
      color="primary"
      (click)="onSearchByClassNameAndCatalog()"
    >
      search
    </button>
  </div>

  <div class="table-wrapper">
    <table mat-table [dataSource]="courses" class="mat-elevation-z8">
      <ng-container matColumnDef="ClassName">
        <th mat-header-cell *matHeaderCellDef>ClassName</th>
        <td mat-cell *matCellDef="let element">{{ element.className }}</td>
      </ng-container>
      <ng-container matColumnDef="Subject">
        <th mat-header-cell *matHeaderCellDef>Subject</th>
        <td mat-cell *matCellDef="let element">{{ element.subject }}</td>
      </ng-container>
      <ng-container matColumnDef="CatalogNbr">
        <th mat-header-cell *matHeaderCellDef>CatalogNbr</th>
        <td mat-cell *matCellDef="let element">{{ element.catalog_nbr }}</td>
      </ng-container>
      <ng-container matColumnDef="SsrComponent">
        <th mat-header-cell *matHeaderCellDef>SsrComponent</th>
        <td mat-cell *matCellDef="let element">{{ element.ssr_component }}</td>
      </ng-container>
      <ng-container matColumnDef="StartTime">
        <th mat-header-cell *matHeaderCellDef>StartTime</th>
        <td mat-cell *matCellDef="let element">{{ element.start_time }}</td>
      </ng-container>
      <ng-container matColumnDef="EndTime">
        <th mat-header-cell *matHeaderCellDef>EndTime</th>
        <td mat-cell *matCellDef="let element">{{ element.end_time }}</td>
      </ng-container>
      <ng-container matColumnDef="Operation">
        <th mat-header-cell *matHeaderCellDef>Operation</th>
        <td mat-cell *matCellDef="let element">
          <button
            style="margin-right: 1vw;"
            mat-raised-button
            *ngIf="role === 'user' || role === 'manager'"
            (click)="onAddCourseToSchedule(element)"
          >
            add
          </button>
          <button mat-raised-button (click)="onLookReviews(element)">reviews</button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>
</div>
